// 导入要用到的样式
require("../css/edit.less")
require("../lib/weui/weui.css")
require("../fonts/iconfont.css")
document.ready(function () {
    // 判断是否登录
    window.utils.isLogin();
    // 取出本地存储的数据（用户的id）
    const userId = window.localStorage.getItem("userId");

    // 获取元素节点
    const nickname = document.querySelector("#nickname"); //昵称
    const sex = document.querySelector("#sex"); //性别
    const province = document.querySelector("#province"); //省份
    const city = document.querySelector("#city"); //城市
    const birthday = document.querySelector("#birthday"); //生日
    const textarea = document.querySelector("#textarea") // 文本域
    const count = document.querySelector("#count"); //文本域计数器

    // 数据回填：让用户进入修改页面就能看到自己的信息
    const user = JSON.parse(window.localStorage.getItem("user"));

    // 回填数据
    if (user.nickname) {
        nickname.value = user.nickname //昵称
    }
    if (user.gender) {
        sex.textContent = user.gender //性别
    }
    if (user.birthday) {
        birthday.textContent = window.utils.getDate(user.birthday) //生日
    }
    if (user.address !== null) {
        // 处理地址:user.address.split(",")[0]
        province.textContent = user.address.split(",")[0] //省份
        city.textContent = user.address.split(",")[1] //城市
    }
    if (user.sign) {
        textarea.value = user.sign //签名
    }

    // 返回功能
    const iconBack = document.querySelector(".iconleftarrow")
    iconBack.addEventListener("click", function () {
        window.history.back() //返回上一页
    })

    // 性别
    document.querySelector('#showSexPicker').addEventListener('click', function () {
        weui.picker([{
            label: '男',
            value: 0
        }, {
            label: '女',
            value: 1
        }], {
            onConfirm: function (result) {
                sex.textContent = result[0].label
            },
            title: '性别'
        });
    });

    // 生日
    document.querySelector('#showDatePicker').addEventListener('click', function () {
        //    调用weui内置的日历选择器
        weui.datePicker({
            start: 1920,
            end: new Date().getFullYear(),
            onConfirm: function (result) {
                // 处理数据
                let ret = result.map(function (v) {
                    return window.utils.padZero(v.value)
                })
                // 赋值渲染
                birthday.textContent = ret.join("-")
            },
            title: '生日'
        });
    });

    // 文本域输入字数控制以及数字跟踪
    textarea.addEventListener("input", function (e) {
        // input：输入事件
        count.textContent = e.target.value.length
    })

    // 上一个事件
    let preHandleCityClick = null;

    /* 获取省份信息 */
    function getProvince() {
        window.$http.get('address/province', function (res) {
            if (res.status === 0) {

                // 循环省份数据 处理成我们要的结构
                let provinceOption = res.data.map(function (v) {
                    return {
                        label: v.name,
                        value: v.addressId
                    }
                })

                /* 省份 */
                document.querySelector('#showProvincePicker').addEventListener('click', function () {
                    // 调用weui的方法
                    weui.picker(provinceOption, {
                        // 点击确定
                        onConfirm: function (result) {
                            // 渲染省份
                            province.textContent = result[0].label
                            // 把城市变成未选择
                            city.textContent = '未选择'

                            // 发送获取城市的ajax
                            window.$http.get(`address/city/${result[0].value}`, function (res) {
                                if (res.status === 0) {

                                    // 处理城市数据 变成我们需要的格式
                                    let cityOption = res.data.map(function (v) {
                                        return {
                                            label: v.name,
                                            value: v.addressId
                                        }
                                    })

                                    /* 处理城市点击事件 */
                                    function handleCityClick() {
                                        // 调用weui的方法
                                        weui.picker(cityOption, {
                                            // 点击确定
                                            onConfirm: function (result) {
                                                city.textContent = result[0].label
                                            },
                                            title: '请选择城市'
                                        });
                                    }

                                    /* 城市 */
                                    document.querySelector('#showCityPicker').removeEventListener('click', preHandleCityClick); // 解绑事件
                                    preHandleCityClick = handleCityClick // 把城市点击的处理函数 存入一个变量中
                                    document.querySelector('#showCityPicker').addEventListener('click', handleCityClick);
                                }
                            })
                        },
                        title: '请选择省份'
                    });
                });

            }
        })
    }
    // 保存信息
    const submitBtn = document.querySelector("#submitbtn");
    submitBtn.addEventListener("click", function () {
        let params = {
            "userId": userId - 0,
            "imgurl": window.localStorage.getItem("imgurl"),
            "nickname": nickname.value,
            "gender": sex.textContent,
            "birthday": birthday.textContent,
            "sign": textarea.value,
            "address": [province.textContent, city.textContent]
        }
        //保存数据成功，发送修改数据ajax
        window.$http.post("users/userEdit", params, function (res) {
            if (res.status === 0) {
                window.utils.showTost("succ", "修改成功", 1000);
                setTimeout(function () {
                    // 修改成功，跳转到我的页面
                    window.location.href = "./mine.html"
                }, 1000)
            }
        })
    })

    getProvince();

})